import Vue from 'vue'
import Vuex from 'vuex'
//vuex作为一个插件被引入
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作，业务逻辑通常放在这里处理完成，这里除了接收用户的dispatch，还可以dispatch到另外一个方法中，形成链式的处理过程
const actions = {
    increment(context,value){
        context.commit('INCREMENT',value)
    },
    decrement(context,value){
        console.log("获取到上下文:",context)
        context.commit('DECREMENT',value)

    },
    //当前state状态为奇数时在加
    incrementOdd(context,value){
        if(context.state.sum %2 !== 0){
            context.commit('INCREMENT',value)
        }
    },
    incrementWait(context,value){
        setTimeout(()=>{
            context.commit('INCREMENT',value)
        },500)
    },
    chainfilter(context,value){
        console.log('chainfilter被调用了');
        
        context.dispatch('demo',value)
    },
    demo(context,value){
        console.log('demo被调用了');
        context.commit('INCREMENT',value)
    }
}
//准备mutations对象——修改state中的数据，不做任何的业务处理 接收actions的commit操作
const mutations = {
    INCREMENT(state,value){
        state.sum += value
    },
    DECREMENT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据 mutations->state vuex会自动维护
const state = {
    sum: 0, //当前计算和的状态
    school: '尚硅谷',
    subject: 'vue'
}
//在逻辑复杂并且计算要用到store中的数据，并且还支持逻辑多复用可以使用getters
const getters = {
    //模拟一个非常复杂的运算
    bigSum(state){
        return state.sum*10
    }
}

export default new Vuex.Store({
    actions:actions,
    mutations:mutations,
    state:state,  //同名可以简写
    getters:getters
})
